<template>
  <i-form
    class="mini-form"
    :label-width="66"
    v-loading="isloading"
    :element-loading-text="loadingmsg"
  >
    <!-- 选择合约 -->
    <FormItem :label="$t('trade.contract')" class="mini-item">
      <i-select
        v-model="nowConCode"
        @on-change="selectContract"
        :placeholder="$t('trade.selectContract')"
      >
        <i-option
          v-for="item in contractlist"
          :value="item.heyue_id"
          :key="item.heyue_id"
        >{{item.heyue_name}}</i-option>
      </i-select>
    </FormItem>
    <!-- 手数 -->
    <FormItem :label="$t('trade.number')" class="mini-item">
      <i-input type="number" v-model="hands" :placeholder="$t('trade.number')">
        <div class="handle-group" slot="suffix">
          <span class="adjust up" @click="figureUp(1,1)"></span>
          <span
            class="adjust down"
            :style="{cursor: hands === 1 ? 'not-allowed' : 'pointer'}"
            @click="figureUp(1,0)"
          ></span>
        </div>
      </i-input>
    </FormItem>
    <!-- 价格 -->
    <FormItem :label="$t('trade.price')" class="mini-item order-item">
      <i-select v-model="priceType" :placeholder="priceType === 1 ? $t('trade.rivalPrice'):$t('trade.priceP')">
        <!-- <i-option :value="'1'">{{$t('trade.rivalPrice')}}</i-option> 隐藏对手价-->
        <i-option :value="2">{{$t('trade.marketPrice')}}</i-option>
        <!-- <i-option :value="'3'">{{$t('trade.latestPrice')}}</i-option> -->
        <i-option :value="4">{{$t('trade.restingOrder')}}</i-option>
      </i-select>
      <div v-show="priceType === 4" class="pricetipbox">
        <i-select slot="label" class="tipbox1" v-model="priceTypeIcon" placeholder="<=">
          <!-- <i-option :value="'1'">{{$t('trade.rivalPrice')}}</i-option> 隐藏对手价-->
          <i-option v-for="item in priceTypeIconList" :key="item.key" :value="item.key">{{item.value}}</i-option>
        </i-select>
        <i-input style="width: 100%; margin-top: 6px;flex: 4;" type="number" v-model="btnPrice" :placeholder="$t('trade.restingOrder')">

          <span class="el-icon-minus hand-icon" :style="{cursor: nowMinimum === 0 ? 'not-allowed' : 'pointer'}" @click="figureUp(2,0)"
            slot="prefix"></span>
          <span class="el-icon-plus hand-icon" :style="{cursor: nowMinimum === 0 ? 'not-allowed' : 'pointer'}" @click="figureUp(2,1)"
            slot="suffix"></span>
        </i-input>
      </div>
      
    </FormItem>
    <!-- 止盈点数" -->
    <FormItem :label="$t('trade.limitedN')" class="mini-item">
      <i-input
        type="number"
        step="any"
        v-model="stopScore"
        @on-change="v => scoreOrAmonut(v, 1)"
        :placeholder="$t('trade.score')"
      >
        <div class="handle-group" slot="suffix">
          <span class="adjust up" @click="figureUp(3,1)"></span>
          <span
            class="adjust down"
            @click="figureUp(3,0)"
            :style="{cursor: stopScore === 0 ? 'not-allowed' : 'pointer'}"
          ></span>
        </div>
      </i-input>
      <!-- 止盈金额 -->
      <i-input
        class="amount"
        type="number"
        step="any"
        v-model="profitAmount"
        @on-change="v => scoreOrAmonut(v, 3)"
        :placeholder="$t('trade.takeProfitAmount')"
      />
    </FormItem>
    <!-- 止损点数 -->
    <FormItem :label="$t('trade.stopN')" class="mini-item ml6">
      <i-input
        type="number"
        step="any"
        v-model="stopLoss"
        @on-change="v => scoreOrAmonut(v, 2)"
        :placeholder="$t('trade.score')"
      >
        <div class="handle-group" slot="suffix">
          <span class="adjust up" @click="figureUp(4,1)"></span>
          <span
            class="adjust down"
            @click="figureUp(4,0)"
            :style="{cursor: stopLoss === 0 ? 'not-allowed' : 'pointer'}"
          ></span>
        </div>
      </i-input>
      <!-- 止损金额 -->
      <i-input
        class="amount"
        type="number"
        step="any"
        v-model="lossAmount"
        @on-change="v => scoreOrAmonut(v, 4)"
        :placeholder="$t('trade.stopLossAmount')"
      />
    </FormItem>
    <div class="btn-goup">
      <div class="handle-btn buy-price" @click="handleBtns(1)">
        <!-- 对手价 -->
        <div class="price-num" v-if="priceType === 1">{{latestSell}}</div>
        <!-- 市价 -->
        <div class="price-num" v-if="priceType === 2">{{$t('trade.marketPrice')}}</div>
        <!-- 最新价 -->
        <div class="price-num" v-if="priceType === 3">{{latestPrice}}</div>
        <!-- 挂单价 -->
        <div class="price-num" v-if="priceType === 4">{{btnPrice}}</div>
        <!-- 手动价格 -->
        <div class="price-num" v-if="priceType === 5">{{nowPrice}}</div>
        <div class="btn-msg">{{$t('trade.buy')}}</div>
      </div>
      <div class="handle-btn sell-price" @click="handleBtns(2)">
        <!-- 对手价 -->
        <div class="price-num" v-if="priceType === 1">{{latestBuy}}</div>
        <!-- 市价 -->
        <div class="price-num" v-if="priceType === 2">{{$t('trade.marketPrice')}}</div>
        <!-- 最新价 -->
        <div class="price-num" v-if="priceType === 3">{{latestPrice}}</div>
        <!-- 挂单价 -->
        <div class="price-num" v-if="priceType === 4">{{btnPrice}}</div>
        <!-- 手动价格 -->
        <div class="price-num" v-if="priceType === 5">{{nowPrice}}</div>
        <div class="btn-msg">{{$t('trade.sell')}}</div>
      </div>
      <div class="handle-btn close-price" :class="handleClass" @click="handleBtns(3)">
        <!-- 对手价 -->
        <div class="price-num" v-if="priceType === 1">{{latestPrice}}</div>
        <!-- 市价 -->
        <div class="price-num" v-if="priceType === 2">{{$t('trade.marketPrice')}}</div>
        <!-- 最新价 -->
        <div class="price-num" v-if="priceType === 3">{{latestPrice}}</div>
        <!-- 挂单价 -->
        <div class="price-num" v-if="priceType === 4">{{btnPrice}}</div>
        <!-- 手动价格 -->
        <div class="price-num" v-if="priceType === 5">{{nowPrice}}</div>
        
				<div class="btn-msg" v-if="isbuy === '1'">{{$t('trade.close')}}买</div>
				<div class="btn-msg" v-else-if="isbuy === '2'">{{$t('trade.close')}}卖</div>
				<div class="btn-msg" v-else>{{$t('trade.close')}}买</div>
      </div>
    </div>
  </i-form>
</template>

<script>
import { mapGetters } from "vuex";
import * as trade from "../../request/trade";
import {
  Form,
  FormItem,
  Select,
  Option,
  Input,
  Dropdown,
  DropdownMenu,
  DropdownItem
} from "iview";
export default {
  name: "MiniTrade",
  components: {
    FormItem,
    IForm: Form,
    ISelect: Select,
    IOption: Option,
    IInput: Input,
    Dropdown,
    DropdownMenu,
    DropdownItem
  },
  computed: {
    ...mapGetters([
      "setList", // 合约设置列表
			"ponIndex",
			"isbuy",
      "contractlist", // 所有合约数据列表
      "actcontract", // 当前选中的合约id
      "positionlist", // 持仓数据
      "latestMarket", // 最新行情
      "miniLoading" // loading状态，影响本页面
    ]),
    handleClass() {
      // 平仓按钮禁用显示，根据持仓数据和当前选中的合约来判断
			// console.log('list', this.ponIndex, this.showPosList)
      if (this.positionlist.length === 0) {
        // 无持仓持仓数据，不能平仓
        return ["buy-disable"];
      }
			if (this.showPosList[this.ponIndex] && this.showPosList[this.ponIndex].CanBeFlat === 0) {
				return ["buy-disable"];
			}
			if (this.ponIndex === -1) {
				// 持仓索引不存在，不能平仓
				return ["buy-disable"];
			}
      let hasBuy = false;
      let hasSell = false;
      // 遍历查找当前选中合约id是否存在于持仓列表,如果有单方向合约，可平，有双向合约无法平仓，需要到交易面板中平仓
      for (const item of this.positionlist) {
        if (this.actcontract === item.ContractID) {
          if (item.BusCode === "1") {
            hasBuy = true;
          }
          if (item.BusCode === "2") {
            hasSell = true;
          }
        }
      }
      // 有双向合约无法平仓，无法判断当前合约买卖方向，需要到交易面板中平仓
      if (hasBuy && hasSell) {
        return ["buy-disable"];
      }
      // 没有买卖方向标记，表示持仓列表中无此合约
      if (!hasBuy && !hasSell) {
        return ["buy-disable"];
      }
      return [];
    }
  },
  watch: {
		positionlist: {
			handler(newVal) {
				// 持仓列表
				// 判断当前选中的合约是否存在，如果不存在则清空
				if (
					!newVal[this.ponIndex] ||
					newVal[this.ponIndex].ContractID !== this.actcontract
				) {
					this.$store.dispatch("panel/updatePonIndex", -1);
					// this.ponIndex = -1;
				}
				// 如果当前数据不存在或者数据为空数组，将当前展示的明细列表和汇总列表都置空
				if (!newVal || newVal.length === 0) {
					this.showPosList = [];
					this.showCollectList = [];
					return;
				}
				// console.log(newVal);
				// 利用map生成新数据存储地址，避免在vuex外改变状态
				// 明细持仓列表
				let newData = newVal.map(v => {
					let nowObj = {
						...v
					};
					return nowObj;
				});
				this.showPosList = newData;
				let arrList = this.showPosList  // 默认的ponIndex
				for (let i = 0; i<arrList.length; i++) {
					if (this.nowConCode == arrList[i].ContractID) {
						this.$store.dispatch("panel/updatePonIndex", i)
						return
					}
				}
			},
			deep: true,
			immediate: true
		},
    actcontract: {
      handler(newVal, oldVal) {
        // 这里是主页列表选中合约是否会影响当前合约变化
        if (!newVal) {
          return;
        }
        // 合约号无变化
        if (newVal === oldVal) {
          return;
        }
        // 如果为不锁定状态
        this.nowConCode = newVal;
      },
      immediate: true // 最初绑定值的时候也执行handler函数
    },
    latestMarket: {
      handler(newVal) {
        let that = this;
        let priceList = {}; // 最新价数据提取暂存
        //  console.log(this.nowConCode)
        for (const latest of newVal) {
          priceList[latest.heyue_id] = latest.currentPrice;
          // 更新左侧表单中选中的合约的最新价格
          // console.log('当前数据', latest)
          if (this.nowConCode === latest.heyue_id) {
            this.latestPrice = latest.currentPrice; // 最新价
            this.latestSell = latest.seller1; // 卖
            this.latestBuy = latest.buy1; // 买
          }
        }
      },
      deep: true,
      immediate: true
    },
    nowConCode: {
      handler(newVal, oldVal) {
        if (newVal === oldVal) {
          return;
        }
        // 合约变化后初始化各个值，更新最小波动
        this.priceType = 2;
        this.nowPrice = ""; // 当前价格(左侧表单中)
        this.hands = 1; // 手数,最小1笔
        this.stopScore = 0; // 止盈点数
        this.stopLoss = 0; // 止损点数
        // 当前选中的合约变化时，获取最小波动
        for (const item of this.$store.getters.productlist) {
          // console.log(item)
          if (item.ContractID === newVal) {
                  // console.log('当前合约名称： ' + item.Name)
                  // console.log('当前合约最小波动： ' + item.Minimum)
                  this.nowMultiplier = item.Multiplier; // 合约乘数
                  this.nowMinimum = item.Minimum; // 最小波动
            if (this.setList) {
              var setList = this.setList
              for (let i = 0; i < setList.length; i++) {
                if (setList[i][1] == item.Name) {
                this.stopScore = setList[i][2]
                this.stopLoss = setList[i][3];
                localStorage.zhiying =  this.stopScore;
                localStorage.zhisun =  this.stopLoss;
                }
              }
            }
          }

        }
      },
      immediate: true
    },
    miniLoading(newVal) {
      if (newVal) {
        this.isloading = true;
      } else {
        this.isloading = false;
      }
    },
    priceType(val) {
      this.isCal = false; // 复位
      if (val !== 1) {
        this.nowPrice = this.latestPrice;
      }
      if (val === 4) {
        this.btnPrice = this.latestPrice;
      }
    }
  },
  data() {
    return {
      priceTypeIcon: 0, // 客户指定价位时提交标志
      priceTypeIconList: [
        {key: 0, value: '<='},
        {key: 1, value: '>='}
      ],
      nowConCode: "", // 合约
      hands: 1, // 手数
      nowPrice: "", // 当前价格
      priceType: 2, // 当前选中的价格类型: 1对手价2市价3最新价4挂单价
      stopScore: 0, // 止盈点数
      profitAmount: 0, // 止盈金额
      stopLoss: 0, // 止损点数
      lossAmount: 0, // 止损金额
      latestPrice: 0, // 当前组件选择的合约的最新价，根据行情更新
      latestBuy: 0, // 当前组件选择的合约的买价，根据行情更新
      latestSell: 0, // 当前组件选择的合约的卖价，根据行情更新
      btnPrice: 0, // 挂单价时按钮中的价格
      nowMultiplier: 0, // 当前合约乘数
      nowMinimum: 0, // 当前最小波动
      isCal: false, // 用户是否进行了加减操作标记（挂单价判断依据）
      isloading: false, // 是否显示loading
      loadingmsg: this.$t("tip.placeWait") // loading提示文字
    };
  },
  methods: {
    selectContract(id) {
      // 选中合约处理
			this.$store.dispatch("product/updateActcontract", id)
      // this.$store.commit("product/SET_ACTCONTRACT", id);
    },
    switchPriceType(i) {
      this.priceType = parseInt(i);
    },
    figureUp(type, isAdd) {
      // type 类型 isAdd 加减
      // 计算各个input的值增减
      switch (type) {
        case 1:
          // 计算手数（单位：1）
          this.hands = this.hands * 1;
          if (this.hands >= 1 && isAdd) {
            this.hands += 1;
          } else if (this.hands > 1 && !isAdd) {
            this.hands -= 1;
          }
          break;
        case 2:
          // 当前价格（单位：最小波动）
          this.isCal = true;
          // console.log("最小波动价格：" + this.nowMinimum);
          let digits = 0;
          if (this.nowMinimum !== 0) {
            digits = this.nowMinimum.toString().split(".")[1].length;
          }

          // priceType1对手价2市价3最新价4挂单价5调整后价格
          if (this.priceType !== 4) {
            this.priceType = 5;
          }
          if (this.nowPrice === "") {
            this.nowPrice = this.latestPrice;
          }
          this.nowPrice = this.nowPrice * 1;
          this.nowMinimum = this.nowMinimum * 1;
          if (this.nowPrice >= 0 && isAdd) {
            // 加
            this.nowPrice += this.nowMinimum;
          } else if (this.nowPrice > 0 && !isAdd) {
            if (this.nowPrice - this.nowMinimum >= 0) {
              this.nowPrice -= this.nowMinimum;
            }
          }
          this.nowPrice = this.nowPrice.toFixed(digits);
          if (this.priceType === 4) {
            this.btnPrice = this.nowPrice;
          }
          break;
        case 3:
          // 止盈点数（单位：1）
          this.stopScore = this.stopScore * 1;
          if (this.stopScore >= 0 && isAdd) {
            this.stopScore += 1;
          } else if (this.stopScore > 0 && !isAdd) {
            this.stopScore -= 1;
          }
          this.scoreOrAmonut(this.stopScore, 1, true);
          //   console.log("当前点数", this.stopScore);
          break;
        case 4:
          // 止损点数（单位：1）
          this.stopLoss = this.stopLoss * 1;
          if (this.stopLoss >= 0 && isAdd) {
            this.stopLoss += 1;
          } else if (this.stopLoss > 0 && !isAdd) {
            this.stopLoss -= 1;
          }
          this.scoreOrAmonut(this.stopScore, 2, true);
          break;
      }
    },
    handleBtns(type) {
      // 买、卖、平按钮操作
      let price = 0; // 当前要发送的给后台的价格
      if (this.isCal) {
        // 改变则传自定义价(委托价)
        price = this.nowPrice;
      } else {
        // 不改变传最新价
        price = this.latestSell;
      }

      if (this.priceType === 2 && !this.isCal) {
        // 市价加减，为委托价
        price = 0; // 不操作传0
      }
      // console.log("合约id:" + contractID);

      // 委托建仓(15) 发送：15;合约ID;数量;价格;买卖方向;IP地址;止盈点;止损点;
      // 委托建仓 => 买
      if (type === 1) {
        // 根据选择的价格类型做处理, 对手价默认为相反，市价默认为0
        if (this.priceType === 1 && this.nowPrice === "" && !this.isCal) {
          // 当前类型为对手价，且用户未自定义价格
          price = this.latestSell; // 最新卖价
        }

        this.$store.commit("product/SET_MINILOADING", true);
        // 将数据更新到store中和提交给后台
        trade.wsSend(
          `15;${this.nowConCode};${this.hands};${price};1;${this.stopScore};${this.stopLoss};${this.priceTypeIcon};${this.$store.getters.userip};`
        );
        this.hands = 1;
        this.stopScore = 0;
        this.stopLoss = 0;
      }

      // 委托建仓 => 卖
      if (type === 2) {
        if (this.priceType === 1 && this.nowPrice === "" && !this.isCal) {
          // 当前类型为对手价，且用户未自定义价格
          price = this.latestBuy; // 最新买价
        }

        this.$store.commit("product/SET_MINILOADING", true);
        trade.wsSend(
        	`15;${this.nowConCode};${this.hands};${price};2;${this.stopScore};${this.stopLoss};${this.priceTypeIcon};${this.$store.getters.userip} `
        );
        this.hands = 1;
        this.stopScore = 0;
        this.stopLoss = 0;
      }

      // 委托平仓(17) 发送：17;合约ID;数量;价格;买卖方向;明细ID;IP;
      // 委托平仓
      if (type === 3) {
        // 当前为disable,则不作任何操作
        console.log("平", this.ponIndex, this.showPosList[this.ponIndex], this.nowConCode);
				if (this.ponIndex === -1) {
					return;
				}
				if (this.handleClass[0] !== undefined) {
					return;
				}
				if (
					this.showPosList[this.ponIndex] !== undefined &&
					this.showPosList[this.ponIndex].CanBeFlat <= 0
				) {
					return;
				}

				if (this.showPosList[this.ponIndex].ContractID !== this.nowConCode) {
					return;
				}
        this.$store.dispatch("panel/playTipsAudio", 3); // 平仓声音
        let bz = this.showPosList[this.ponIndex].BusCode == 1 ? 1 : 0
        if (this.showPosList[this.ponIndex].BusCode) {
					let _buscode = this.showPosList[this.ponIndex].BusCode
					if (_buscode === '买') {
						this.showPosList[this.ponIndex].BusCode = '1'
					} else if (_buscode === '卖') {
						this.showPosList[this.ponIndex].BusCode = '2'
					}
				}
        trade.wsSend(
        	`17;${this.nowConCode};${this.hands};${price};${this.showPosList[this.ponIndex].BusCode};${this.showPosList[this.ponIndex].ID};${bz};${this.$store.getters.userip};`
        );
        this.hands = 1;
      }
    },
    scoreOrAmonut(eve, type, isRes = false) {
      // console.log(eve);
      let value = eve; // 转换为数字
      if (!isRes) {
        value = eve.target.value; // 值 String
        value = value * 1;
      }

      let multiply = this.nowMultiplier;
      let miniNum = this.nowMinimum;
      let point = 0;
      let endResult = 0; // 计算结果
      if (miniNum !== 0) {
        point = Number(miniNum)
          .toString()
          .split(".")[1].length; // 小数点后几位
      }
      //   console.log("类型", type);
      //   console.log("当前数值", value);
      //   console.log("合约乘数", multiply);
      //   console.log("最小波动", miniNum);
      // 当前为点数： 1止盈点2止损点
      if (type === 1 || type === 2) {
        endResult = (value * multiply * miniNum).toFixed(point);
      }
      // 当前为金额： 3止盈金额4止损金额
      if (type === 3 || type === 4) {
        endResult = (value / multiply / miniNum).toFixed(point);
      }

      // 当前只返回结果
      // if (isRes) {
      //   return endResult;
      // }

      switch (type) {
        case 1:
          // 止盈点 =》 止盈金额
          this.profitAmount = parseFloat(endResult);
          break;
        case 2:
          // 止损点 =》 止损金额
          this.lossAmount = parseFloat(endResult);
          break;
        case 3:
          // 止盈金额 =》 止盈点
          this.stopScore = endResult * 1;
          // console.log(this.stopScore);
          break;
        case 4:
          // 止损金额 =》 止损点
          this.stopLoss = endResult * 1;
          break;
      }
    }
  }
};
</script>

<style lang="scss">
.mini-form {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 8px 10px 0 12px;
  user-select: none;

  .mini-item {
    &.ivu-form-item {
      margin-bottom: 16px;
      .ivu-form-item-label {
        text-align: justify;
        text-align-last: justify;
      }

      .ivu-form-item-content {
        display: flex;

        // select选中样式
        .ivu-select .ivu-select-dropdown-list .ivu-select-item:hover {
          background: #57a3f3;
          color: #fff;
        }

        // input样式
        .ivu-input-wrapper {
          &.amount {
            margin-left: 8px;
          }
          input[type="number"]::-webkit-outer-spin-button,
          input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
          }

          .ivu-input-suffix {
            border: 1px solid #99999a;
            border-radius: 0 4px 4px 0;
            width: 24px;
          }
        }

        .ivu-dropdown {
          width: 100%;
        }

        // 自定义上下键
        .handle-group {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          user-select: none;

          &.price-handle {
            width: 24px;
            height: 32px;
            border: 1px solid #99999a;
            border-left: none;
            position: relative;
            top: 1px;
            border-radius: 0 4px 4px 0;
          }

          .adjust {
            background-color: #b7cffb;
            cursor: pointer;
            flex: 1;

            &.up {
              background-image: url("../../assets/img/option.png");
              background-repeat: no-repeat;
              background-position: 7px 4px;
            }

            &.down {
              background-image: url("../../assets/img/option.png");
              background-repeat: no-repeat;
              background-position: 7px -12px;
            }

            &:hover {
              background-color: #ddeffd;
            }
          }
        }
      }
    }

    &.order-item {
      .ivu-form-item-content{
        display: block;
        .pricetipbox{
					display: flex;
					align-items: flex-end;
					.tipbox1{
						flex: 1;
          }
          .ivu-input-prefix, .ivu-input-suffix {
            border: 1px solid #dcdee2;
            border-radius: 4px 0 0 4px;
            width: 24px;
            line-height: 2.8;
          }
          .ivu-input-suffix {
            border-radius: 0 4px 4px 0;
          }
        }
      }
    }
  }
  .btn-goup {
    position: absolute;
    width: 96%;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    .handle-btn {
      width: calc(33.33% - 18px);
      text-align: center;
      padding: 5px 0px 3px 0px;
      font-size: 18px;
      font-family: sans-serif;
      border: 1px solid #104261;
      border-radius: 3px;
      position: relative;
      background: linear-gradient(to bottom, #fff 0%, #e0dedf 100%);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      user-select: none;
      .price-num {
        font-size: 13px;
        min-height: 19px;
      }
      .btn-msg {
        position: relative;
        padding-top: 4px;
        &::before {
          position: absolute;
          content: "";
          top: -0px;
          left: 4px;
          right: 4px;
          height: 1px;
          background: #c2c2ba;
        }
      }
      &.buy-price {
        color: #d80606;
        &:hover {
          border-color: #de9621;
        }
      }
      &.sell-price {
        color: #14a705;
        &:hover {
          border-color: #de9621;
        }
      }
      &.close-price {
        color: #0363b7;
        &:hover {
          border-color: #de9621;
        }
      }
      &.buy-disable {
        background: #eee;
        color: #ccc;
        border: 1px solid #cccaca;
        cursor: not-allowed;
        &:hover {
          border-color: #cccaca;
        }
      }
    }
  }
}
</style>

